import React, { useRef } from 'react'
import { Table, Button, Form, Input, Select, Space, Badge, Tag } from 'antd'
import type { TableColumnsType } from 'antd'
import './index.scss'
import { PlusOutlined } from '@ant-design/icons'
import AddApi from './addApi/index'

interface DataType {
	id: string
	name: string
	priority: string
	status: string
	scope: string
	tag: Array<string>
}

const columns: TableColumnsType<DataType> = [
	{
		title: 'API编码',
		width: 100,
		dataIndex: 'id',
		key: 'id',
	},
	{
		title: 'API名称',
		width: 120,
		dataIndex: 'name',
		key: 'name',
	},
	{
		title: '优先级',
		dataIndex: 'priority',
		key: 'priority',
		width: 120,
	},
	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		width: 120,
		render: () => (
			<Badge
				status="success"
				text="启用"
			/>
		),
	},
	{
		title: '作用域',
		dataIndex: 'scope',
		key: 'scope',
		width: 120,
	},
	{
		title: '标签',
		dataIndex: 'tag',
		key: 'tag',
		width: 200,
		render: () => (
			<Tag
				color="success"
				key="001">
				标签一
			</Tag>
		),
	},
	{
		title: 'Action',
		key: 'operation',
		fixed: 'right',
		width: 200,
		render: () => (
			<Space size="middle">
				<a>详情</a>
				<a>编辑</a>
				<a style={{ color: 'red' }}>删除</a>
				<a>版本管理</a>
			</Space>
		),
	},
]

const data: DataType[] = []
for (let i = 0; i < 46; i++) {
	data.push({
		id: i.toString(),
		name: `API ${i}`,
		priority: '一级',
		status: '启用',
		scope: `作用域 ${i}`,
		tag: ['001', '002', '003'],
	})
}

const Index = () => {
	const [form] = Form.useForm()
	const demoModal: any = useRef()

	const showModal = () => {
		if (demoModal.current) {
			demoModal.current.showModal()
		}
	}

	const handleChange = (value: string) => {
		console.log(`selected ${value}`)
	}

	return (
		<div className="api-center">
			<Form
				form={form}
				layout={'inline'}>
				<div className="search">
					<div className="search-left">
						<Form.Item label="API名称">
							<Input placeholder="请输入..." />
						</Form.Item>
						<Form.Item label="优先级">
							<Select
								showSearch
								placeholder="请选择..."
								style={{ width: 120 }}
								onChange={handleChange}
								options={[
									{ value: '1', label: '一级' },
									{ value: '2', label: '二级' },
									{ value: '3', label: '三级' },
								]}
							/>
						</Form.Item>
					</div>
					<div className="search-right">
						<Form.Item>
							<Button
								className="right-btn"
								type="primary">
								检索
							</Button>
							<Button className="right-btn">重置</Button>
						</Form.Item>
					</div>
				</div>
			</Form>
			<div className="table">
				<div className="table-btn">
					<Button
						className="btn"
						type="primary"
						icon={<PlusOutlined />}
						onClick={showModal}>
						新建
					</Button>
					<Button className="btn">批量编辑优先级</Button>
					<Button className="btn">批量编辑作用域</Button>
				</div>
				<Table
					columns={columns}
					dataSource={data}
					rowKey="id"
					scroll={{ y: `calc(${100}vh - ${56}vh)` }}
				/>
			</div>
			<AddApi ref={demoModal} />
		</div>
	)
}

export default Index
